<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="false">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row :gutter="48">
          <a-col :span="24">
            <a-form-model-item label="项目档案编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="finalNo">
              <a-input :disabled=formDisabled v-model="model.finalNo" placeholder="请输入项目档案编号"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="项目名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projectName">
              <a-input :disabled=formDisabled v-model="model.projectName" placeholder="请输入项目名称"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="合同最新进度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contractNodeId_dictText">
              <a-input :disabled=formDisabled  v-model="model.contractNodeId_dictText" placeholder="请输入合同最新进度"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="最近更新时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contractLastOperTime">
              <j-date :disabled=formDisabled date-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择最近更新时间" v-model="model.contractLastOperTime" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contractCompleteStatus_dictText">
              <a-input :disabled=formDisabled v-model="model.contractCompleteStatus_dictText" placeholder="请输入状态"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <div style="margin-bottom: 6px;margin-top: 6px">
            <!-- v-if="!formDisabled" -->
              <a-button @click="handleAdd" type="primary">新增</a-button>
            </div>
            <a-table ref="table" size="middle" rowKey="id" :scroll="{x:'120%'}" :loading="loading" :columns="columns" :pagination="false"
              :data-source="dataSource">
              <template slot="nodeDesc" slot-scope="text">
                <j-ellipsis :value="text" :length="15"/>
              </template>
              <span slot="action" slot-scope="text, record">
                <template>
                  <a-button class="ruleButton" :ghost="true" type="primary" icon="edit" @click="handleEdit(record)" />
                  <a-divider type="vertical" />
                  <a-popconfirm title="确定删除吗?" @confirm="() => unitDelete(record.id)">
                    <a-button class="ruleButton" :ghost="true" type="primary" icon="delete" />
                  </a-popconfirm>
                </template>
              </span>
            </a-table>
          </a-col>
        </a-row>
        <erp-progress-contract-detail-modal ref="itemList" @ok="modalFormOk"></erp-progress-contract-detail-modal>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'
import ErpProgressContractDetailModal from './ErpProgressContractDetailModal'
import JEllipsis from '@/components/jeecg/JEllipsis'
export default {
  name: 'ErpProgressContractEditForm',
  components: {
    ErpProgressContractDetailModal,
    JEllipsis
  },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      model: {
      },
      loading: false,
      dataSource: [],
      columns: [
        {
          title: '顺序',
          align: 'center',
          width: 150,
          dataIndex: 'sortOrder',
        },
        {
          title: '进度节点名称',
          align: 'center',
          dataIndex: 'nodeName',
          ellipsis: true
        },
        {
          title: '进度节点说明',
          align: 'center',
          dataIndex: 'nodeDesc',
          scopedSlots: { customRender: 'nodeDesc' },
          ellipsis: true
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 150,
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'action'
          }
        }
      ],
      labelCol: {
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 24 },
      },
      confirmLoading: false,
      validatorRules: {
      },
      url: {
        addContractNode: "/api/erp/progress/erpProgressContractNode/addContractNode",
        edit: "/api/erp/progress/erpProgressContract/edit",
        queryListByContractId: "/api/erp/progress/erpProgressContractNode/queryListByContractId",
        queryById: "/api/erp/progress/erpProgressContract/queryById"
      }
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model));
  },
  methods: {
    unitDelete(id) {
      for (let i = 0; i < this.dataSource.length; i++) {
        if (this.dataSource[i].id == id) {
          this.dataSource.splice(i, 1);
        }
      }
    },
    handleAdd() {
      this.$refs.itemList.add(this.model);
      this.$refs.itemList.title = '新增合同进度节点';
      this.$refs.itemList.disableSubmit = false;
    },
    handleEdit(record) {
      // this.$refs.itemList.edit(record);
      this.$refs.itemList.edit(this.model.id,record);
      this.$refs.itemList.title = '编辑合同进度节点';
      this.$refs.itemList.disableSubmit = false;
    },
    add() {
      this.edit(this.modelDefault);
    },
    edit(record) {
      this.$refs.form.resetFields();
      this.model = Object.assign({}, record);
      this.dataSource = []
      if (this.model.id) {
        getAction(this.url.queryListByContractId, { id: this.model.id }).then((res) => {
          if (res.success) {
            this.dataSource = res.result || []
          }
        })
      }
      this.visible = true;
    },
    modalFormOk(data) {

      this.loading = true;
      let flag = true;
      // debugger;
      for (let i = 0; i < this.dataSource.length; i++) {
        if (this.dataSource[i].id == data.id) {
          this.dataSource.splice(i, 1, data);
          flag = false;
        }
      }
      if (flag) {
        if(data.sortOrder==undefined) {
          data.sortOrder = this.dataSource.length + 1
        }
        this.dataSource.push(data);
      }
      console.log("dataSourcedataSource======",this.dataSource);
      this.loading = false;
    },
    submitForm() {
      const that = this;
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true;
          let httpurl = '';
          let method = '';
          // if (!this.model.id) {
          //   httpurl += this.url.addContractNode;
          //   method = 'post';
          // } else {
          //   httpurl += this.url.edit;
          //   method = 'put';
          // }
          httpurl += this.url.addContractNode;
            method = 'post';
          let param = {
            nodeList: this.dataSource,
            contractId: this.model.id
          }
          httpAction(httpurl, param, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.$emit('ok');
            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
          })
        }

      })
    },
  }
}
</script>
